<template>
  <scroll-view scroll-y="true" >
  	<view class="box">
  	  <p @click="backToindex" class="left">《</p>
  	  <input v-model="keyWord" class="search" placeholder="搜索" type="text" />
  	  <p @click="onSearch" class="right">搜索</p>
  	</view>
  	<view class="history-list">
	  <p class="history-del" @click="onDel">删除</p>
  	  <view v-for="(item, index) in historyList" :key="index" class="history-item">{{ item }}</view>
  	</view>
	<search-hot-list></search-hot-list>
  </scroll-view>
</template>

<script>
import { getdnews } from '../../utils/api/news.js'
export default {
  data() {
    return {
      historyList: [],
      keyWord: '',
	  newsInfomation:null,
    };
  },
  onLoad() {
    let historyList = uni.getStorageSync('historyList');
	console.log(1234);
	console.log('get',historyList);
	
    if (historyList) {
      this.historyList = historyList;
    };
  },
  methods: {
	  
	
	  
    backToindex() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    onSearch() {
      this.historyList.unshift(this.keyWord);
      console.log('historyList', this.historyList);
      uni.setStorageSync('historyList', this.historyList);
    },
	onDel(){
		console.log('del');
		uni.removeStorageSync('historyList');
		this.historyList = [];
	}
  }
};
</script>

<style>
.box {
  background-color: antiquewhite;
  height: 60rpx;
  display: flex;
  justify-content: space-evenly;
}
.search {
  width: 75%;
  height: 60rpx;
  border: 1rpx solid #000;
  text-indent: 30rpx;
}
.left {
  display: flex;
  margin: auto;
}
.right {
  display: flex;
  margin: auto;
}
.history-list{
	width: 100%;
	height: 300rpx;
	background-color: burlywood;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.history-del{
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	background: pink;
	padding: 10rpx;
}
.history-item{
	box-sizing: border-box; /* 让边框和内边距计入元素的宽度和高度 */
	  width: 20%; /* 设置为你希望的宽度 */
	  height: 60rpx; /* 高度自适应内容 */
	  margin-top: 30rpx;
	  margin-left: 52rpx;
	  background-color: #fff; /* 设置元素背景色 */
	  padding: 5rpx; /* 设置元素内边距 */
	  border: 1rpx solid #000;
}
.hot-title{
	margin-left: 52rpx;
	font-size: 40rpx;
	font-weight: 700;
}

</style>
